<template>
    <div class="validate simple-page">
        <van-cell-group :border='false'>
            <van-field style="line-height:42px;" clearable disabled v-model="telPhone" placeholder="请输入手机号">
                <template slot="label">
                    <img src="~assets/img/member/tel.png" />
                </template>
            </van-field>
            <van-field style="padding-top:30px;" v-model="verifyCode" center clearable placeholder="请输入短信验证码">
                <template slot="label">
                    <img src="~assets/img/member/validate.png" />
                </template>
                <van-button class="send-button" @click="sendMessage" :disabled="telPhone == '' || sendIntervalTime != 60" slot="button" size="small" type="primary">{{ sendIntervalTime === sendDefaultIntervalTime ? '发送验证码' : `${sendIntervalTime}s后重试` }}</van-button>
            </van-field>
            <van-field style="padding-top:30px;" type="password" v-model="payPassword" center clearable placeholder="请输入支付密码">
                <template slot="label">
                    <img src="~assets/img/member/password.png" />
                </template>
            </van-field>
            <van-field class="confirm-button-box">
                <van-button class="confirm-button" slot="button" :loading="loading" @click="handleSubmit">确认</van-button>
            </van-field>
        </van-cell-group>
    </div>
</template>

<script>
import { telRule } from '@/utils/validate.js'
import { getVerification } from '@/api/order';
import { getMemberInfo } from '@/api/member/index'
import { payOrder } from '@/api/pay'

export default {
    data () {
        return {
            orderId: 0,
            loading: false,
            telPhone: '',
            verifyCode: '',
            sendDefaultIntervalTime: 60,
            sendIntervalTime: 60,
            timer: null,
            typeName:2,
            payPassword:''
        }
    },
    created () {
        this.orderId = this.$route.query.id
//  	this.telPhone = this.$route.query.phone;
    	this.getContactMobile();
	},
    methods: {
    	getContactMobile() {
    		getMemberInfo().then((rst)=>{
    			this.telPhone = rst.data.contactMobile
    		}).catch(()=>{
    			this.$toast('请求失败')
    		})
    	},
        sendMessage() {
            if (!telRule.test(this.telPhone)) {
                this.$toast('手机号格式不正确')
            } else {
                this.setTimeOver()
                getVerification().then((rst)=> {
                    this.$toast(rst.message ? rst.message : '发送失败')
	        	}).catch(()=> {
	        		
	        	})
            }
        },
        setTimeOver() {
            if (this.timer) {
                clearInterval(this.timer)
                this.sendIntervalTime = this.sendDefaultIntervalTime
            }
            this.timer = setInterval(() => {
                this.sendIntervalTime--
                if (this.sendIntervalTime <= 0) {
                    this.sendIntervalTime = this.sendDefaultIntervalTime
                    clearInterval(this.timer)
                }
            }, 1000)
        },
        handleSubmit () {
            this.loading = true
            if (this.verifyCode == '') {
                this.$toast('请输入验证码')
                this.loading = false
            }else if (this.payPassword == '') {
                this.$toast('请输入密码')
                this.loading = false
            }else{
                payOrder(this.typeName, this.orderId, this.verifyCode,this.payPassword).then((rst) => {
                    this.loading = false
                    if (rst.status == 0) {
                        this.$router.push({name: 'orderPayResult', query: {orderId: this.orderId, pay_fee:rst.data.pay_fee,pay_way:rst.data.pay_way,status:rst.data.status}})
                    } else {
                        this.$toast(rst.message ? rst.message : '发送失败')
                    }
                }).catch((err) => {
                    this.loading = false
                    this.$toast('发送失败')
                })
            }
        }
    }
}
</script>

<style lang="scss">
@import "../../styles/color.scss";
.van-dialog .van-button{
	color: $checkBoxColor;
}
.validate {
    .van-cell-group{
        padding: 0 40px;
    }
    .van-cell__title {
        max-width: 40px;
        text-align: left;
        img {
            width: 16px;
            margin-top: -4px;
            vertical-align: middle;
        }
    }
    .confirm-button-box {
        height: 100px;
        .confirm-button {
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -22px;
            height: 44px;
            width: 100%;
            color: #fff;
            background-color: $errorButtonBg;
        }
    }
    .send-button:not(.van-button--disabled) {
        background-color: $errorButtonBg;
        border-color: $errorButtonBg;
    }
}
@media screen and (max-width: 360px) {
	.validate .van-cell-group{
		padding: 0 20px;
	}
}
</style>
